import React, { Component } from 'react';
import './App.css';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
// import timestampToTime from './utils/StrapToTime';



// 引入json数据
import DataJSON from "./data/data.json"

// 引入apex测试模块
// import LineTest from './component/ApexTest/LineTest';
// import BarTest from './component/ApexTest/BarTest';

// 引入模块
import LineBoard from './component/LineBoard/LineBoard'
import BarBoard from './component/BarBoard/BarBoard'

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      min:0,
      max:239,
      coyote_creek:{
        h2o_feet:DataJSON.coyote_creek.h2o_feet,
        h2o_quality:DataJSON.coyote_creek.h2o_quality,
        h2o_pH:DataJSON.coyote_creek.h2o_pH,
        average_temperature:DataJSON.coyote_creek.average_temperature,
        h2o_temperature:DataJSON.coyote_creek.h2o_temperature,
      },
      santa_monica:{
        h2o_feet:DataJSON.santa_monica.h2o_feet,
        h2o_quality:DataJSON.santa_monica.h2o_quality,
        h2o_pH:DataJSON.santa_monica.h2o_pH,
        average_temperature:DataJSON.santa_monica.average_temperature,
        h2o_temperature:DataJSON.santa_monica.h2o_temperature,
      },
      inpValu:''
    }
  }
  // handelChange(e){
  //   this.setState({
  //       inpValu:e.target.value
  //   })
  // }
  getStartDate = (date) => {

      //date1：开始日期，date2结束日期
    var a1 = Date.parse(date);
    var a2 = Date.parse(new Date(this.state.coyote_creek.h2o_quality.datas[0][0]));
    var day = parseInt((a2-a1)/ (1000 * 60 * 60 * 24));//核心：时间戳相减，然后除以天数
    var len = this.state.coyote_creek.h2o_quality.datas.length;
    var count = parseInt(len/31);
    var startIndex = count*(-day)-1;
    var endIndex = startIndex + 240;
    console.log(startIndex)
    console.log(endIndex)
    this.setState({
      min:startIndex,
      max:endIndex
    })
  };

  render() {
    return (
      <div className="App">
        {/* <LineTest></LineTest>
        <BarTest></BarTest> */}
        <div className="contentBox">
          <div className="formBox">
          <p>选择时间</p>
          <DatePicker
            maxDate={new Date(this.state.coyote_creek.h2o_quality.datas[this.state.coyote_creek.h2o_quality.datas.length-1][0])}
            minDate={new Date(this.state.coyote_creek.h2o_quality.datas[0][0])}
            selected={this.state.startDate}
            onChange={this.getStartDate}
          />
          <br/>
            {/* <input type="text" onChange={this.handelChange.bind(this)} defaultValue={this.state.inpValu}/> */}
          </div>
          
          <BarBoard className="barBox"
                      datas={this.state.coyote_creek.h2o_quality.datas.slice(this.state.min,this.state.max)}
                      max={this.state.coyote_creek.h2o_quality.max} min={this.state.coyote_creek.h2o_quality.min} 
                      avg={this.state.coyote_creek.h2o_quality.avg} title={"coyote_creek-h2o_quality"} >
          </BarBoard>
          <BarBoard className="barBox box"
                      datas={this.state.santa_monica.h2o_quality.datas.slice(this.state.min,this.state.max)} 
                      max={this.state.santa_monica.h2o_quality.max} min={this.state.santa_monica.h2o_quality.min} 
                      avg={this.state.santa_monica.h2o_quality.avg} title={"santa_monica-h2o_quality"}>
          </BarBoard>
        </div>
        <div className="contentBox">
          <LineBoard className="lineBox"
                     datas={this.state.coyote_creek.h2o_feet.datas.slice(this.state.min,this.state.max)} 
                      max={this.state.coyote_creek.h2o_feet.max} min={this.state.coyote_creek.h2o_feet.min} 
                      avg={this.state.coyote_creek.h2o_feet.avg} title={"coyote_creek-h2o_feet"}></LineBoard>
          <LineBoard className="lineBox"
                      datas={this.state.coyote_creek.h2o_pH.datas.slice(this.state.min,this.state.max)} 
                      max={this.state.coyote_creek.h2o_pH.max} min={this.state.coyote_creek.h2o_pH.min} 
                      avg={this.state.coyote_creek.h2o_pH.avg} title={"coyote_creek-h2o_pH"}></LineBoard>
          <LineBoard className="lineBox"
                      datas={this.state.coyote_creek.average_temperature.datas.slice(this.state.min,this.state.max)} 
                      max={this.state.coyote_creek.average_temperature.max} min={this.state.coyote_creek.average_temperature.min} 
                      avg={this.state.coyote_creek.average_temperature.avg} title={"coyote_creek-average_temperature"}></LineBoard>
          <LineBoard className="lineBox"
                      datas={this.state.coyote_creek.h2o_temperature.datas.slice(this.state.min,this.state.max)} 
                      max={this.state.coyote_creek.h2o_temperature.max} min={this.state.coyote_creek.h2o_temperature.min} 
                      avg={this.state.coyote_creek.h2o_temperature.avg} title={"coyote_creek-h2o_temperature"}></LineBoard>
        </div>
        <div className="contentBox">
          <LineBoard className="lineBox"
                     datas={this.state.santa_monica.h2o_feet.datas.slice(this.state.min,this.state.max)} 
                      max={this.state.santa_monica.h2o_feet.max} min={this.state.santa_monica.h2o_feet.min} 
                      avg={this.state.santa_monica.h2o_feet.avg} title={"santa_monica-h2o_feet"}></LineBoard>
          <LineBoard className="lineBox"
                      datas={this.state.santa_monica.h2o_pH.datas.slice(this.state.min,this.state.max)} 
                      max={this.state.santa_monica.h2o_pH.max} min={this.state.santa_monica.h2o_pH.min} 
                      avg={this.state.santa_monica.h2o_pH.avg} title={"santa_monica-h2o_pH"}></LineBoard>
          <LineBoard className="lineBox"
                      datas={this.state.santa_monica.average_temperature.datas.slice(this.state.min,this.state.max)} 
                      max={this.state.santa_monica.average_temperature.max} min={this.state.santa_monica.average_temperature.min} 
                      avg={this.state.santa_monica.average_temperature.avg} title={"santa_monica-average_temperature"}></LineBoard>
          <LineBoard className="lineBox"
                      datas={this.state.santa_monica.h2o_temperature.datas.slice(this.state.min,this.state.max)} 
                      max={this.state.santa_monica.h2o_temperature.max} min={this.state.santa_monica.h2o_temperature.min} 
                      avg={this.state.santa_monica.h2o_temperature.avg} title={"santa_monica-h2o_temperature"}></LineBoard>
        </div>
      </div>
    );
  }
}

export default App;
